/*
 * @Author: xiaosihan
 * @Date: 2023-11-26 20:03:56
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-30 23:11:04
 */

import { autorun, toJS } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./SiChuanMap3D.module.less";
// import sichuanMapRender from "./sichuanMapRender";
import NumberJump from "@components/NumberJump/NumberJump";
import { Tooltip } from "antd";
import siChuanMap3DStore from "./chengduMap3DStore";
import chengduMapRender from "./chengduMapRender";
import HospitalInfo from "./HospitalInfo/HospitalInfo";
import doubtfulSituationStore from "@views/DoubtfulSituation/doubtfulSituationStore";
import largeScreenApi from "@api/largeScreenApi";

// 四川3D地图
export default function SiChuanMap3D() {
    const dom = useRef<HTMLDivElement | null>(null);
    const [areaCode, setAreaCode] = useState(siChuanMap3DStore.areaCode);
    const [statistics, setStatistics] = useState<any>({}); //统计数据
    const [clarifyViolations, setClarifyViolations] = useState(0); // 明确违规
    const [highlySuspicious, setHighlySuspicious] = useState(0); // 高度可疑
    const [mildlySuspicious, setMildlySuspicious] = useState(0); // 轻度可疑
    const [active, setActive] = useState(doubtfulSituationStore.mapActive);

    useEffect(() => autorun(() => {
        setActive(doubtfulSituationStore.mapActive);
    }), []);

    useEffect(
        () =>
            autorun(async () => {
                const { areaCode } = siChuanMap3DStore;
                setAreaCode(areaCode);
                const statistics = toJS(doubtfulSituationStore.map_statistics)[510100];

                const res = await largeScreenApi.risk_organization() as any;

                if (statistics) {
                    let key = "";
                    switch (active) {
                        case 0:
                            key = "医疗机构分析情况";
                            break;
                        case 1:
                            key = "药店分析情况";
                            break;
                        case 2:
                            key = "护理机构分析情况";
                            break;
                        case 3:
                            key = "辅助器具机构分析情况";
                            break;
                    }

                    // 建议检查
                    setClarifyViolations(
                        res.list.find(
                            (s: {
                                jianchaType: string;
                                fixmedins_type: string;
                                med_admdvs: number;
                            }) =>
                                s.jianchaType === "建议检查" &&
                                s.fixmedins_type == key &&
                                s.med_admdvs == areaCode
                        )?.rsk_cnt || 0);
                    // 重点监控
                    setHighlySuspicious(
                        res.list.find(
                            (s: { jianchaType: string; fixmedins_type: string, med_admdvs: number }) =>
                                s.jianchaType === "重点监控" &&
                                s.fixmedins_type == key &&
                                s.med_admdvs == areaCode
                        )?.rsk_cnt || 0
                    );
                    // 异常关注
                    setMildlySuspicious(
                        res.list.find(
                            (s: { jianchaType: string; fixmedins_type: string, med_admdvs: number }) =>
                                s.jianchaType === "异常关注" &&
                                s.fixmedins_type == key &&
                                s.med_admdvs == areaCode
                        )?.rsk_cnt || 0
                    );
                    setStatistics(statistics);
                }
            }),
        [active, areaCode]
    );

    return (
        <div className={styles.SiChuanMap3D}>
            {areaCode !== 510100 && (
                <span
                    className={styles.back}
                    onClick={() => {
                        // doubtfulSituationStore.setActiveMap([]);
                        siChuanMap3DStore.setAreaCode(510100);
                    }}
                >
                    {"<<返回"}
                </span>
            )}
            <div
                className={styles.container}
                ref={(dom) => chengduMapRender.setContainer(dom)}
            ></div>

            {/* 地区统计列表 */}
            {/* <CityList /> */}

            {/* 风险总览 */}
            <HospitalInfo active={active} />

            {/* 检查任务数 */}
            {/* <span className={styles.number_tasks}>
        <NumberJump
          value={utils.numToUnit(statistics.number_tasks).value}
          fontSize={22}
        />
        {utils.numToUnit(statistics.number_tasks).unit}件
      </span> */}

            {/* 已核查线索数量 */}
            {/* <span className={styles.recovery_amount}>
        <NumberJump
          value={utils.numToUnit(statistics.check_case).value}
          fontSize={22}
        />
        {utils.numToUnit(statistics.check_case).unit}条
      </span> */}

            {/* 搜索 */}
            {/* <Search /> */}

            {/* 建议检查 */}
            <div className={styles.suggest_checking}>
                {/* 建议检查 */}
                <div
                    className={styles.checking}
                    onClick={() => {
                        if (clarifyViolations) {
                            doubtfulSituationStore.setMapActive(4);
                        }
                    }}
                >
                    <Tooltip
                        placement="right"
                        title="风险分5-10分,建议检查"
                        mouseEnterDelay={0}
                    >
                        <NumberJump value={clarifyViolations} fontSize={22} />家
                        <br />
                        建议检查
                    </Tooltip>
                </div>

                {/* 重点监控 */}
                <div className={styles.monitor}>
                    <Tooltip
                        placement="right"
                        title="风险分3-5分,重点监控"
                        mouseEnterDelay={0}
                    >
                        <NumberJump value={highlySuspicious} fontSize={22} />家
                        <br />
                        重点监控
                    </Tooltip>
                </div>

                {/* 异常关注 */}
                <div className={styles.abnormal}>
                    <Tooltip
                        placement="right"
                        title="风险分0-3分,异常关注"
                        mouseEnterDelay={0}
                    >
                        <NumberJump value={mildlySuspicious} fontSize={22} />家
                        <br />
                        异常关注
                    </Tooltip>
                </div>

                {/* <span className={styles.btn1}>机构分布</span>

        <span className={styles.btn1_2}>检查情况</span> */}

                {/* 一级以下 */}
                {/* <div className={styles.below_level1} >{statistics.below_level1}</div> */}
                {/* 二级以下 */}
                {/* <div className={styles.below_level2} >{statistics.below_level2}</div> */}
                {/* 三级以下 */}
                {/* <div className={styles.below_level3} >{statistics.below_level3}</div> */}
            </div>

            {/* 大数据分析 */}
            {/* <div className={styles.total_number_institutions} >
                {statistics.total_number_institutions}家{">>"}
            </div> */}

            {/* 检查结果 */}
            {/* <div className={styles.violation_rate} >
                {statistics.violation_rate * 100}%
            </div> */}

            {/* <div
                className={active == 0 ? styles.analyze_btn1b : styles.analyze_btn1}
                onClick={() => {
                    doubtfulSituationStore.setMapActive(0);
                }}
            ></div> */}
            {/* <div
                className={active == 1 ? styles.analyze_btn2b : styles.analyze_btn2}
                onClick={() => {
                    doubtfulSituationStore.setMapActive(1);
                }}
            ></div> */}
            <div
                className={active == 2 ? styles.analyze_btn3b : styles.analyze_btn3}
                onClick={() => {
                    doubtfulSituationStore.setMapActive(2);
                }}
            ></div>
            <div
                className={active == 3 ? styles.analyze_btn4b : styles.analyze_btn4}
                onClick={() => {
                    doubtfulSituationStore.setMapActive(3);
                }}
            ></div>
        </div>
    );
}
